<template>
    <section>
        <el-dialog
                :title="cooperative.id == 0 ? '添加合作社' : '编辑合作社' "
                :visible.sync="visible"
                @close="close"
                width="800px"
        >
            <el-form
                    :model="cooperative"
                    :inline="true"
                    :rules="rules"
                    ref="userForm"
            >
                <el-form-item
                        label="名称"
                        :label-width="labelWidth"
                        prop="name"
                >
                    <el-input
                            v-model="cooperative.name"
                            auto-complete="off"
                            maxlength="32"
                            suffix-icon="fa fa-vcard"
                            placeholder="请填写合作社姓名"
                    />
                </el-form-item>
                <el-form-item
                        label="等级"
                        :label-width="labelWidth"
                        prop="rank"
                >
                    <el-select
                            v-model="cooperative.rank"
                            placeholder="请选择"
                    >
                        <el-option
                                v-for="(item,index) in ranks"
                                :key="index"
                                :label="item.name"
                                :value="item.code"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                        label="社会信用编码"
                        :label-width="labelWidth"
                        prop="creditCode"
                >
                    <el-input
                            v-model="cooperative.creditCode"
                            auto-complete="off"
                            maxlength="18"
                            suffix-icon="fa fa-code"
                            placeholder="请填写社会信用编码"
                    />
                </el-form-item>
                <el-form-item
                        label="注册资金"
                        :label-width="labelWidth"
                        prop="registerCapital"
                >
                    <el-input
                            v-model="cooperative.registerCapital"
                            auto-complete="off"
                            maxlength="11"
                            suffix-icon="fa fa-cny"
                            placeholder="请填写注册资金"
                    ><span slot="append">万元</span></el-input>
                </el-form-item>
                <el-form-item
                        label="注册号"
                        :label-width="labelWidth"
                        prop="registerNo"
                >
                    <el-input
                            v-model="cooperative.registerNo"
                            auto-complete="off"
                            maxlength="18"
                            suffix-icon="fa fa-code"
                            placeholder="请填写注册号"
                    />
                </el-form-item>
                <el-form-item
                        label="注册地址"
                        :label-width="labelWidth"
                        prop="registerAddress"
                >
                    <el-input
                            v-model="cooperative.registerAddress"
                            auto-complete="off"
                            maxlength="48"
                            suffix-icon="fa fa-map-marker"
                            placeholder="请填写注册地址"
                    />
                </el-form-item>
                <el-form-item
                        label="成立日期"
                        :label-width="labelWidth"
                        prop="establishmentDate"
                >
                    <el-date-picker
                            v-model="cooperative.establishmentDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择成立日期"
                    />
                </el-form-item>
                <el-form-item
                        label="有效期"
                        :label-width="labelWidth"
                        prop="validDate"
                >
                    <el-date-picker
                            v-model="cooperative.validDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择有效期"
                    />
                </el-form-item>
                <el-form-item
                        label="联系电话"
                        :label-width="labelWidth"
                        prop="phone"
                >
                    <el-input
                            v-model="cooperative.phone"
                            auto-complete="off"
                            maxlength="11"
                            suffix-icon="fa fa-phone"
                            placeholder="请填写联系电话"
                    />
                </el-form-item>
                <el-form-item
                        label="法人姓名"
                        :label-width="labelWidth"
                        prop="legalPersonName"
                >
                    <el-input
                            v-model="cooperative.legalPersonName"
                            auto-complete="off"
                            maxlength="24"
                            suffix-icon="fa fa-user"
                            placeholder="请填写法人姓名"
                    />
                </el-form-item>
                <el-form-item
                        label="法人身份证号"
                        :label-width="labelWidth"
                        prop="legalPersonID"
                >
                    <el-input
                            v-model="cooperative.legalPersonID"
                            auto-complete="off"
                            maxlength="18"
                            suffix-icon="fa fa-id-card"
                            placeholder="请填写法人身份证号"
                    />
                </el-form-item>
                <el-form-item
                        label="法人联系电话"
                        :label-width="labelWidth"
                        prop="legalPersonPhone"
                >
                    <el-input
                            v-model="cooperative.legalPersonPhone"
                            auto-complete="off"
                            maxlength="11"
                            suffix-icon="fa fa-mobile"
                            placeholder="请填写法人联系电话"
                    />
                </el-form-item>
                <el-form-item
                        label="社员人数"
                        :label-width="labelWidth"
                        prop="peopleNum"
                >
                    <el-input
                            v-model="cooperative.peopleNum"
                            auto-complete="off"
                            maxlength="11"
                            suffix-icon="fa fa-sort-numeric-desc"
                            placeholder="请填写社员人数"
                    />
                </el-form-item>
                <el-form-item
                        label="果园面积"
                        :label-width="labelWidth"
                        prop="orchardAcreage"
                >
                    <el-input
                            v-model="cooperative.orchardAcreage"
                            auto-complete="off"
                            maxlength="11"
                            suffix-icon="fa fa-square-o"
                            placeholder="请填写果园面积(:㎡)"
                    />
                </el-form-item>
            </el-form>
            <span
                    slot="footer"
                    class="dialog-footer"
            >
        <el-button
                size="small"
                @click="cancel('userForm')"
        >取 消</el-button>
        <el-button
                size="small"
                type="primary"
                @click="submit('userForm')"
        >确 定</el-button>
      </span>
        </el-dialog>
    </section>
</template>
<style>
</style>
<script>
    import {mapState} from "vuex";

    export default {
        name: "AddAndEdit",
        data() {
            return {
                visible: false,
                labelWidth: "",
                sexes: [],
                ranks: [],
                cooperative: {
                    id: 0,
                    name: "",
                    creditCode: "",
                    registerNo: "",
                    registerAddress: "",
                    establishmentDate: "",
                    validDate: "",
                    registerCapital: "",
                    phone: "",
                    rank: "",
                    legalPersonName: "",
                    legalPersonID: "",
                    legalPersonPhone: "",
                    peopleNum: "",
                    orchardAcreage: ""
                },
                roles: [],
                rules: {
                    name: [
                        {required: true, message: "请输入合作社名称", trigger: "blur"}
                    ],
                    creditCode: [
                        {required: true, message: "请输入社会信用编号", trigger: "blur"}
                    ],
                    registerCapital: [
                        {required: true, validator: this.$validator.decimalValid, trigger: "blur"}
                    ],
                    registerNo: [
                        {required: true, message: "请输入注册号", trigger: "blur"}
                    ],
                    registerAddress: [
                        {required: true, message: "请输入注册地址", trigger: "blur"}
                    ],
                    establishmentDate: [
                        {required: true, message: "请选择成立日期", trigger: "blur"}
                    ],
                    validDate: [
                        {required: true, message: "请选择有效期", trigger: "blur"}
                    ],
                    phone: [{required: true, message: "请输入联系电话", trigger: "blur"}],
                    rank: [{required: true, message: "请选择等级", trigger: "blur"}],
                    legalPersonName: [
                        {required: true, message: "请输入法人姓名", trigger: "blur"}
                    ],
                    legalPersonID: [
                        {required: true, validator: this.$validator.idCardNo, trigger: "blur"}
                    ],
                    legalPersonPhone: [
                        {required: true, message: "请输入法人联系电话", trigger: "blur"}
                    ],
                    peopleNum: [
                        {required: true, validator: this.$validator.numValid, trigger: "blur"}
                    ],
                    orchardAcreage: [
                        {required: true, validator: this.$validator.decimalValid, trigger: "blur"}
                    ]
                }
            };
        },
        computed: {
            ...mapState({
                codebooks: state => state.codebooks.codebooks
            })
        },
        watch: {
            value: {
                deep: true,
                immediate: true,
                handler: function (val) {
                    this.visible = val.show;
                    this.labelWidth = val.formLabelWidth || "120px";
                    this.cooperative = val.cooperative;
                    this.loadData();
                }
            },
            visible(val) {
                if (!val) this.$emit("on-show-change", this.$data);
            }
        },
        mounted() {
            this.sexes = this.codebooks ? this.codebooks.sexs : [];
            this.ranks = this.codebooks ? this.codebooks.ranks : [];
        },
        methods: {
            close() {
                this.cancel('userForm');
            },
            cancel(formName) {
                this.$refs[formName].clearValidate();
                this.visible = false;
                this.cooperative = {
                    id: 0
                };
            },
            loadData() {
                if (
                    !this.cooperative ||
                    !this.cooperative.id ||
                    this.cooperative.id <= 0
                ) {
                    return;
                }
                this.$api.cooperative.detail(this.cooperative.id, result => {
                    console.log(result);
                    this.cooperative = result.cooperative;
                    this.cooperative.rank = this.cooperative.rank.code;
                    this.$delete(this.cooperative, "status");
                });
            },
            submit(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        const callback = () => {
                            this.cancel(formName);
                        };
                        if (this.cooperative.id > 0) {
                            this.$api.cooperative.update(this.cooperative, callback)
                        } else {
                            this.$api.cooperative.save(this.cooperative, callback);
                        }
                    } else {
                        return false;
                    }
                });
            }
        },
        props: {
            value: {
                type: Object,
                default: function () {
                    return {
                        show: false,
                        formLabelWidth: "120px",
                        cooperative: {
                            id: 0
                        }
                    };
                }
            }
        }
    };
</script>
